<template lang="html">
  <el-container class="setting-center_mall-shop-setting_shop-initialize">
    <el-main>
      <div class="wrapper-box">
        <div class="dis">
          <div class="goods-list-image">
            <div class="mobile-nav">
              <img class="mobile-header-image" src="../../../../assets/micro-page/nav-mobile-top.png">
              <!-- 展开形式 -->
              <div ref="navbarId" class="navbar">
                <div class="dis al_item dis_ju navbar-content" @click="isNavigation">
                  <!-- <i :class="dataField.mainIconData" /> -->
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="dataField.mainIconData" />
                  </svg>
                  <!--<img :src="dataField.mainIconData" alt="" style="width: 100%; height: 100%;">  -->
                </div>
                <div v-show="isNavigationShow" class="op-menu">
                  <div v-for="(item,index) in suspendConfig" :key="index" class="op-menu-item">
                    <!-- <i :class="item.chooseIcon"></i> -->
                    <svg class="icon" aria-hidden="true">
                      <use :xlink:href="item.chooseIcon" />
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex_1">
            <div class="mobile-config">
              <div class="bg-white-panel dis al_item dis_ju_spb">
                <div>导航位置</div>
                <div class="cursor menu-model dis al_item">
                  <el-form label-width="10px">
                    <el-form-item class="person-center-form-item">
                      <div class="font_w">
                        <el-radio-group v-model="dataField.location">
                          <el-radio :label="1">右下</el-radio>
                          <el-radio :label="2">右上</el-radio>
                          <el-radio :label="3">左上</el-radio>
                          <el-radio :label="4">左下</el-radio>
                        </el-radio-group>
                      </div>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <div>
                <div class="nav-item">
                  <div class="dis al_item dis_ju_spb item-header">
                    <div class="cursor flex_1 dis al_item">
                      <span>应用页面</span>
                    </div>
                  </div>
                  <div class="item-content">
                    <el-form label-width="10px">
                      <el-form-item class="person-center-form-item">
                        <div class="al_item">
                          <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
                          <div style="margin: 15px 0;" />
                          <el-checkbox-group v-model="dataField.pageShow" @change="handleCheckedChange">
                            <el-checkbox v-for="item in applicationPageOptions" :key="item.value" :label="item.value">{{ item.pageName }}</el-checkbox>
                          </el-checkbox-group>
                        </div>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
              </div>
              <div>
                <div class="nav-item">
                  <div class="dis al_item dis_ju_spb item-header">
                    <div class="cursor flex_1 dis al_item">
                      <span>主导航</span>
                    </div>
                  </div>
                  <div class="item-content">
                    <el-form label-width="50px">
                      <el-form-item class="person-center-form-item" label="图标">
                        <div class="dis al_item">
                          <div @click="selectMainIcon()">
                            <div class="cursor selected-demo selected" style="color: #9c9c9c;width: 30px; height: 30px; border-radius: 50%;">
                              <svg class="icon" aria-hidden="true">
                                <use :xlink:href="dataField.mainIconData" />
                              </svg>
                             <!-- img :src="dataField.mainIconData" alt="" style="width: 100%; height: 100%; border-radius: 50%;" -->
                            </div>
                          </div>
                        </div>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
              </div>
              <div>
                <div class="nav-item">
                  <div class="dis al_item dis_ju_spb item-header">
                    <div class="cursor flex_1 dis al_item">
                      <span>子导航</span>
                    </div>
                  </div>
                  <div class="item-content">
                    <draggable :list="dataField.subnavigationOptions" ghost-class="ghost">
                      <div v-for="(item,index) in dataField.subnavigationOptions" :key="index" class="subkeyBox">
                        <div class="titleBox">
                          <div class="checkBox">
                            <el-checkbox v-model="item.checked" class="checkcen" @change="handleCheckedSubnavigation(item)" />
                          </div>
                          <div class="SubnavigationName">
                            <el-input v-model="item.name" size="mini" placeholder="请输入导航名称" />
                          </div>
                        </div>
                        <div>
                          <el-form label-width="50px">
                            <el-form-item class="person-center-form-item" label="图标">
                              <div class="dis al_item">
                                <div @click="selectSubnavigationIcon(item, index)">
                                  <div class="cursor selected-demo selected" style="color: #9c9c9c;line-height: 15px;">
                                    <svg class="icon" aria-hidden="true">
                                      <use :xlink:href="item.chooseIcon" />
                                    </svg>
                                  </div>
                                </div>
                              </div>
                            </el-form-item>
                            <el-form-item class="person-center-form-item" label="路径">
                              <div class="dis al_item inputH">
                                <el-input style="width: 320px" size="small" v-model="item.path" >
                                  <span class="cursor" slot="append" @click="linkClick(item, index)">修改</span>
                                </el-input>
                                <!-- <el-input v-model="item.path" size="mini" placeholder="请输入导航对应的页面路径" /> -->
                              </div>
                            </el-form-item>
                          </el-form>
                        </div>
                        <i class="pos_a el-icon-circle-close cancel" @click.stop="deleteSubnavigation(index)" />
                      </div>
                    </draggable>
                    <div class="add-nav-item child-menu" @click="handleAddChildTab()">
                      添加子导航
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
      <el-dialog title="选择主图标" :visible.sync="isMainDialogIcon" width="50%">
        <iconFont @iconBox="iconMainBox" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="isMainDialogIcon = false">取 消</el-button>
          <el-button type="primary" @click="iconMainChooseModel">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="选择图标" :visible.sync="isDialogIcon" width="50%">
        <iconFont @iconBox="iconBox" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="isDialogIcon = false">取 消</el-button>
          <el-button type="primary" @click="iconChooseModel">确 定</el-button>
        </span>
      </el-dialog>
      <!--选择微页面-->
      <el-dialog custom-class="up-dialog" :close-on-click-modal="false" :modal="false" top="5vh"  title="页面选择" :visible.sync="dialogChoosePages" width="55%">
        <choose-feature :is-get-choose-data="isGetChooseFeature" @chooseChooseFeaturesFun="chooseChooseFeaturesFun" />
        <div slot="footer" class="dialog-footer" style="text-align: right;margin-top: 20px;">
          <el-button size="mini" type="primary" @click="isGetChooseFeature=!isGetChooseFeature">确定</el-button>
          <el-button size="mini" @click="dialogChoosePages = false">取消</el-button>
        </div>
      </el-dialog>
    </el-main>
    <div class="wrapper-save">
      <el-button :loading="isSaving" :disabled="isSaving" size="mini" type="primary" @click="save">保存</el-button>
    </div>
  </el-container>
</template>

<script>
import Index from './index'

export default Index
</script>
<style lang="scss">
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

.el-form .el-form-item {
  &.person-center-form-item {
    margin-bottom: 5px !important;
  }
}

.person-center-form-item {
  font-size: 12px;

  .el-form-item__label, .el-form-item__content, .el-radio__label, .el-button, .el-checkbox .el-checkbox__label {
    font-size: 12px;
  }
}

</style>
<style lang="scss" scoped>
@import "index";
</style>
